
一、defineProps 与 TS

// 1、语法类型校验
defineProps:({
    name:{
        type:String,
        require:true
    },
    age:{
        type:Number,
        require:true
    }
})

//2、使用泛型指定props的类型校验

defineProps<{
    name:String
    age:Number
}>()

interface Props{
    value:Boolean
}

const props = info(defineProps<Props>(),{value:false})

//3、ref 与 ts

const age = ref<number>(10)
const name = ref<string>('')
type Todo ={
    id:number
    name:string
}
// 此处也可以使用interface 
// Interface 更适合定义对象的结构和接口，支持声明合并和扩展
// Type 更适合定义复杂的类型，包括联合类型、交叉类型和字面量类型。
const list = ref<Todo[]>([])


// 4、computed 与 TS

const listCount = computed<number>(()=>{
    return list.value.filter((item)=>item.done).length
})

// 5、事件与ts 

const move = (e:MouseEvent)=>{
    move.value.x=e.pageX
    move.value.y=e.pageY
}
<h1 @move="move($event)"></h1>

// 6、template ref 与 ts
const imgRef = ref<HTMLImageElement|null>(null)
 document.createElement('img').__proto__

// -----------------------------------------------------------------------------------------------------------

